<template>
  <el-dialog
    title="选择区域"
    :visible.sync="isDialogShow"
    :width="handleScreenWidthToVw(1080)+'px'"
    :before-close="handleClose"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    @closed="handleDestory"
  >
    <div class="tip justify-start flex-sub">{{tipText}}</div>
    <div class="map rela">
      <a-map :zoom.sync="map.zoom" :center="map.center" @click="handleMapClick">
        <amap-polygon
          :fillOpacity="fillOpacity"
          strokeColor="#339df1"
          fillColor="#0084ee"
          :editable="editable"
          ref="polygon"
          v-if="isShowPolygon"
          :path.sync="path"
        />
        <amap-marker v-for="item in position" :key="item[0]" :position="[item[0], item[1]]" />
      </a-map>

      <div class="abso flex-column-center polygon-info" v-if="isShowPolygon">
        <div class="mg-bottom-10">
          <el-button size="small" @click="handleSetPolygon(true)">开启编辑</el-button>
        </div>
        <div>
          <el-button size="small" @click="handleSetPolygon(false)">关闭编辑</el-button>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <SubButton title="绑定" @subClick="handleSub" />
      <CancelButton @cancelClick="handleClose" />
    </span>
  </el-dialog>
</template>

<script>
import SubButton from '@/components/sub-button/index.vue'
import CancelButton from '@/components/cancel-button/index.vue'
import { handleScreenWidthToVw } from '@/utils/tools'
import AMap from '@amap/amap-vue/lib/amap'
import AmapPolygon from '@amap/amap-vue/lib/polygon'
import { loadAmap } from '@amap/amap-vue'
import AmapMarker from '@amap/amap-vue/lib/marker'
import { apiSetLocation } from '../api'

export default {
  components: { SubButton, CancelButton, AMap, AmapPolygon, AmapMarker },
  props: {
    isDialogShow: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      path: [],
      map: {
        zoom: 17,
        center: [113.524857, 22.386236],
      },
      position: [],
      editable: false,

      fillOpacity: 0.15,
    }
  },

  watch: {
    item: {
      immediate: true,
      deep: true,
      handler: function (value) {
        if (value.locationVos && Array.isArray(value.locationVos)) {
          const path = []
          value.locationVos.forEach(pot => {
            path.push([pot.longitude, pot.latitude])
          })
          this.path = path
        } else {
          this.path = []
        }

        if (value.longitude && value.latitude) {
          this.map.center = [value.longitude, value.latitude]
        }
      },
    },
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    isShowPolygon() {
      return this.path.length >= 3
    },
    tipText() {
      return !this.isShowPolygon
        ? '请先点击地图选择3个点作为区域后再进行编辑'
        : '可以通过右下方的按钮开启或关闭编辑区域，编辑好后点击绑定即可'
    },
  },

  async mounted() {
    await loadAmap()
  },
  methods: {
    async handleSub() {
      const { id } = this.item
      const locationVos = this.path.map(item => {
        return { longitude: item[0], latitude: item[1] }
      })
      await apiSetLocation({ id, locationVos })
      this.$message.success('绑定成功')
      this.handleClose()

      this.$emit('subDialog')
    },
    handleClose() {
      this.$emit('closeDialog', false)
    },
    handleMapClick(e) {
      if (this.isShowPolygon) return

      const { lnglat } = e

      if (lnglat) {
        //[经度, 维度]
        this.path.push([lnglat.lng, lnglat.lat])
        this.position.push([lnglat.lng, lnglat.lat])
        if (this.path.length >= 3) {
          this.position = []
          this.editable = true
        }
      }
    },
    handleSetPolygon(isOpen) {
      this.editable = isOpen
    },
    handleDestory() {
      const path = []
      this.item.locationVos.forEach(pot => {
        path.push([pot.longitude, pot.latitude])
      })
      this.path = path
      this.editable = false
    },
  },
}
</script>

<style lang="scss" scoped>
.map {
  width: vw(1080px);
  height: vh(500px);
}

::v-deep {
  .el-dialog__header {
    height: vh(52px);
    padding: vh(17px) vw(23px) vh(17px);
    // background-color: #f8f8f8;
  }

  .el-dialog__title {
    font-size: vw(18px);
    font-weight: 500;
    color: #333;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: vh(20px);
  }

  .el-dialog__footer {
    padding: vh(10px) vw(20px) vh(20px);
    // background: #f0f4f8;
    text-align: center;
  }

  .amap-logo {
    display: none !important;
  }

  .amap-copyright {
    display: none !important;
  }
}

.polygon-info {
  right: vw(10px);
  width: vw(100px);
  height: vh(100px);
  background: #fff;
  transform: translateY(-110%);
  box-shadow: 1px 1px 5px #888;
}

.tip {
  padding-bottom: vh(10px);
  letter-spacing: 0.5px;
  color: #bbb;
}
</style>
